<template>
  <div id="stackBarContainer" :style="{ width, height }">
  </div>
</template>

<script>
  import fontSize from "@/utils/fontSize";
  import Echarts from 'echarts'
  export default {
    name: "StackBar",
    props: {
      // 在外层加一个固定宽高的容器，否则可能不显示
      title: String,
      width: {
        type: Number | String,
        default: '100%'
      },
      height: {
        type: Number | String,
        default: '100%'
      },
      data: {
        type: Array,
        default: () => [
          {
            name: '男',
            data: [1.2, 1.6, 2.1, 3.1, 4.2, 8.1, 8.9]
          },
          {
            name: '女',
            data: [1.4, 2.1, 3.1, 4.1, 5.1, 7.1, 9.9]
          },
        ]
      }
    },
    watch: {
      data: {
        // 对对象进行深度监听
        handler(nv) {
          this.setChart()
        },
        immediate: true,
        deep: true,
      },

    },
    data() {
      return {
        // myChart: null,
        option: {
          title: {
            show: true,
            text: this.title,
            left: 0,
            top: 50,
            textStyle: {
              color: '#fff',
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          color: ['#3395FF', '#FF8080'],
          legend: {
            show: true,
            orient: 'vertical',
            right: 0,
            top: 'center',
            // align: 'right',
            textStyle: {
              color: '#fff',
              fontSize: fontSize.fontSize(17),
            },
            formatter: function (name) {
              return name + ' %';
            }
          },
          grid: {
            top: "3%",
            left: "3%",
            right: "12%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: [],
            axisLabel: {
              show: true,
              color: '#fff',
              fontSize: 12,
              fontWeight: 'bold',
              formatter: '{value}' + this.unit
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(207,238,252,0.2)",
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          yAxis: {
            type: "value",
            max: function (value) {
              return value.max + 5;
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            // axisLine: {
            //   show: false,
            //   lineStyle: {
            //     color: "rgba(207,238,252,0.2)",
            //   },
            // },
            // axisTick: {
            //   //y轴刻度线

            //   show: false,
            // },
            splitLine: {
              lineStyle: {
                color: "rgba(126,159,182,0.21)",
              },
            },
          },
          series: this.data,
        },
      };
    },
    methods: {
      setChart(data) {
        this.$nextTick(() => {
          let myChart = Echarts.init(document.getElementById('stackBarContainer'))

          if (!data) {
            data = this.data
          }
          const series = data.map(item => {
            return {
              ...item,
              type: 'bar',
              stack: 'Ad',
              barWidth: fontSize.fontSize(36),
              emphasis: {
                focus: 'series'
              },
              label: {
                show: true,
                fontSize: fontSize.fontSize(15),

              }
            }
          })
          this.option = {
            ...this.option,
            series
          }
          myChart.setOption(this.option)
        })
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.setChart()
      })
    }
  };
</script>

<style lang="scss" scoped>
  #stackBarContainer {
    width: 100%;
    height: 100%;
  }
</style>